---
import { panda, Stack } from '../../styled-system/jsx'
import { navItems } from '../lib/constants'
import { getUrl } from "../lib/url"
import SideNavItem from './side-nav-item.astro'
---

<panda.nav marginTop="8">
  <Stack gap="10">
    <div>
      <panda.span fontWeight="bold" fontSize="small" opacity="0.7">TOKENS</panda.span>
      <panda.ul mb="8" listStyleType="none" p="0" my="2" mx="0">
        {
          navItems
            .filter((item) => item.type === 'token')
            .map((item) => <SideNavItem href={getUrl(item.id)}>{item.label}</SideNavItem>)
        }
      </panda.ul>
    </div>
    <div>
      <panda.span fontWeight="bold" fontSize="small" opacity="0.7">PLAYGROUND</panda.span>
      <panda.ul listStyleType="none" p="0" my="2" mx="0">
        {
          navItems
            .filter((item) => item.type === 'playground')
            .map((item) => <SideNavItem href={getUrl(item.id)}>{item.label}</SideNavItem>)
        }
      </panda.ul>
    </div>
  </Stack>
</panda.nav>
